<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index"
				:class="{'active': viewType == item.key}"
				@click="changeView(item)"
			>
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<div class="mainTable">
			<tab1 v-if="viewType=='待处理'" :viewType="viewType"></tab1>
			<tab2 v-if="viewType=='待回复'" :viewType="viewType"></tab2>
			<tab3 v-if="viewType=='已完成'" :viewType="viewType"></tab3>
		</div>
	</div>
</template>

<script>
import Tab1 from './tab1/index.vue'
import Tab2 from './tab2/index.vue'
import Tab3 from './tab3/index.vue'
export default {
    data(){
        return {
			viewType: '待处理',
			paramList: [
				{ name: "待处理",key:'待处理',tableType:'1'},
				{ name: "待回复",key:'待回复',tableType:'2'},
				{ name: "已完成",key:'已完成',tableType:'3'},
			],
        }
    },
    methods: {
		changeView(val){
			this.viewType = val.key;
		},
    },
    components: {Tab1,Tab2,Tab3},
}
</script>

<style lang="scss" scoped>
.mine-account{
	.leftList {
		display: flex;
		margin-bottom: 15px;
		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;
			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}
		}
	}
}

</style>